<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="dataList" />
    <Table
      :records="this.dataList ? data : records"
      @ed="ed"
      @de="de"
      :data="data"
    ></Table>
    <MyMask :flag="flag" @fn="fn" :list="list"></MyMask>
  </div>
</template>

<script>
import Table from './components/Table.vue'
import MyMask from './components/Mask.vue'
export default {
  components: { Table, MyMask },
  name: 'App',
  data () {
    return {
      records: [
        {
          date: '2022-01-01',
          doctor: '张三',
          diagnosis: '感冒',
          prescription: '感冒药'
        },
        {
          date: '2022-02-01',
          doctor: '李四',
          diagnosis: '头疼',
          prescription: '止疼药'
        },
        {
          date: '2022-03-01',
          doctor: '王五',
          diagnosis: '腰痛',
          prescription: '止痛贴'
        }
      ],
      dataList: '',
      data: [],
      flag: false,
      list: []
    }
  },
  methods: {
    fn (val) {
      this.flag = val
    },
    ed (val) {
      this.flag = val
    },
    de (val) {
      console.log(val)
      this.list = this.records.filter(item => item.doctor === val)
      console.log(this.list)
    }
  },
  watch: {
    dataList: {
      handler (val) {
        this.data = this.records.filter(item => item.doctor === val)
      }
    }
  }
}
</script>

<style scoped></style>
